<template>
  <div class="wrapper" style="display: flex; flex-direction: row;">
    <div class="box1" style="margin-right: 200px;">
      <h1>路由权限</h1>
        <el-button @click="routeA">A页面</el-button>
        <el-button @click="routeB">B页面</el-button>
        <el-button @click="routeC">C页面</el-button>
      </div>
      <div class="box2" style="margin-right: 200px;">
        <h1>使用函数处理</h1>
        <el-button type="primary" :disabled="!buttonRole.add">增</el-button>
        <el-button type="success" :disabled="!buttonRole.delete">删</el-button>
        <el-button type="warning" :disabled="!buttonRole.edit">改</el-button>
        <el-button type="danger" :disabled="!buttonRole.find">查</el-button>
        <h1>使用指令处理</h1>
        <el-button type="primary" v-userAuth="'add'">增</el-button>
        <el-button type="success" v-userAuth="['add', 'delete']">删</el-button>
        <el-button type="warning" v-userAuth="'delete'">改</el-button>
        <el-button type="danger" v-userAuth="['add', 'delete', 'edit']">查</el-button>
      </div>
      <div class="box3" style="margin-right: 200px;">
        <h1>组件权限</h1>
        <AuthComp userAuth="add">
          <el-button type="primary">增</el-button>
        </AuthComp>
        <AuthComp :userAuth="['add', 'delete']">
          <el-button type="success">删</el-button>
        </AuthComp>
        <AuthComp userAuth="delete">
          <el-button type="warning">改</el-button>
        </AuthComp>
        <AuthComp :userAuth="['add', 'delete', 'edit']">
          <el-button type="danger">查</el-button>
        </AuthComp>
      </div>
      <div class="box4">
        <AuthComp userAuth="add1">
          <UseLessComp></UseLessComp>
        </AuthComp>
      </div>
  </div>
</template>
<script>
/**
 * 选择禁用还是展示与隐藏由需求决定 
 * 
 * 组件生命周期
 * 
 * 前四种 前段资源+后端权限 主前段
 */
import {useAuthButton} from '@/hooks/useAuthButton'
import AuthComp from '@/components/Role/AuthComp.vue'
import UseLessComp from './UseLessComp.vue'

export default {
  name: "Show",
  mounted: async function () {
        try {
            this.buttonRole = await useAuthButton();
        } catch (error) {
            console.error('获取权限信息出错:', error);
        }
    },
  methods: {
    routeA(){
      this.$router.push('/pageA');
    },
    routeB(){
      this.$router.push('/pageB');
    },
    routeC(){
      this.$router.push('/pageC');
    }
  },
  data(){
    return {
      buttonRole: {}
    }
  },
  components:{
    AuthComp,
    UseLessComp
  }
}
</script>